<template>
    <div class="login">
        <el-row :gutter="10" class="login-container">
            <el-form :model="loginForm" :rules="rules" ref="validateForm" label-width="1em" class="login-body"
                     hide-required-asterisk="false">
                <el-form-item prop="username">
                    <el-input v-model="loginForm.username" prefix-icon="el-icon-user" placeholder="请输入用户名称"></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input type="password" v-model="loginForm.password" prefix-icon="el-icon-lock" show-password
                              placeholder="请输入密码"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="text">忘记密码？</el-button>
                </el-form-item>
                <el-form-item class="login-body-button">
                    <el-button class="login-submit" type="danger" round @click="submit('double')">登录-双菜单</el-button>
                    <el-button class="login-submit single"  round @click="submit('single')">登录-单菜单</el-button>
                </el-form-item>
            </el-form>
        </el-row>
    </div>
</template>

<script>
    import {onBeforeMount, reactive, ref, toRefs, unref} from "vue"
    import {useRouter} from 'vue-router'
    import {useStore} from 'vuex'
	import { login } from '@/apis/modules/login'
    import { menu } from '@/apis/modules/menu'
    export default {
        setup() {
            const router = useRouter()
            const store = useStore()
            const validateForm = ref(null)
            const state = reactive({
                login: {
                    height: '',
                },
                loginForm: {
                    username: '',
                    password: '',
                },
            })
            const rules = {
                username: [
                    {required: true, message: '用户名称不能为空', trigger: 'blur'}
                ],
                password: [
                    {required: true, message: '密码不能为空', trigger: 'blur'}
                ],
            }
            onBeforeMount(() => {
                state.login.height = document.body.clientHeight + "px"
            })
            const submit = async (type) => {
                const form = unref(validateForm)
                console.log(!form)
                if (!form) {
                    return
                }
                await form.validate()
                // 校验验证码
				const res = await login({
					username: state.loginForm.username,
					password: state.loginForm.password
				})
                console.log(res)
                const menus = await menu({
                    menuType:type
                })
                let menuData = {
                    menuType:type,
                    data:menus.data
                }
				store.commit('setToken', res.data.token)
                store.commit('setUserInfo', state.loginForm)
                store.commit('setMenuType',menuData)
                router.push({path: 'main'})
            }
            return {
                ...toRefs(state),
                rules,
                validateForm,
                submit,
            }
        },
        components: {
        }
    }
</script>

<style lang="scss" scoped>
      .login-logo {
          width: 120px;
          height: 120px;
          display: block;
          margin: 2rem auto;
      }
      .login-container {
        //   width: 900px;
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
          background: rgba(233, 233, 233, 0.3);
          border-radius: 0.4rem;
          border: 1px white solid;
          padding: 0.8rem;
      }
      .login-body {
          padding: 30px 50px;
          background: rgba(233, 233, 233, 0.6);
          width: 400px;
          border-radius: 0.2rem;
      }
      .el-input__inner {
          border-radius: 20px;
      }
      .codeImg {
          height: 40px;
      }
      .login-submit {
          width: 100%;
      }
    .single{
        
        margin:20px 0 0 0!important;
    }
</style>